<template>
  <div>
    <div class="policy">
      <div class="tab_bubble">
        <span class="title">省内高考政策</span>
      </div>
      <div class="list" v-if="articleData.length>0">
        <a class="item" :href="item.link" target="_blank" v-for="(item,index) in articleData" :key="index">
          <!-- <img :src="item.image" alt=""> -->
          <label class="ell">{{item.title}}</label>
        </a>
      </div>
      <no-content v-else :text="text"></no-content>
      <div class="paginate">
        <paginate :total="totalElements" :pagegroup="3" :current-page="page" @pagechange="pagechange" :display="params.size"></paginate>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from '@/utils'
export default {
  data () {
    return {
      articleData: [],
      totalElements: 0,
      page: 1,
      params: {
        page: 0,
        size: 5
      },
      text: '正在加载数据...'
    }
  },
  props: {
    province: {
      type: [String, Number],
      default () {
        return ''
      }
    }
  },
  created () {
    if (this.province) {
      this.getArticle()
    }
  },
  methods: {
    getArticle () {
      this.params.provinceId = this.province
      this.$axios.get(api.queryModuleArticleInfo, { params: this.params }).then(data => {
        if (data.provincePolicyList.content.length > 0) {
          this.articleData = data.provincePolicyList.content
          this.totalElements = data.provincePolicyList.totalElements
          this.text = ''
        } else {
          this.text = '暂无数据'
        }
      })
    },
    // 分页
    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getArticle()
    }
  },
  // computed: {
  //   province () {
  // 　　return this.province
  // 　}
  // },
  watch: {
    province: function (newVal, oldVal) {
      if (newVal != oldVal) {
        this.params.provinceId = newVal
        this.getArticle()
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .policy{
    background-color: $light;
    border-radius: 12px;
  }
  .list {
    padding: 0 20px;
    margin-top: 20px;
    .item {
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin-bottom: 22px;
      }
      img {
        width: 101px;
        height: 62px;
        background-color: $stable;
      }
      label {
        flex: 1;
        height:25px; line-height:25px;
        display: inline-block;
        &:hover {
          cursor: pointer;
          color: $positive;
        }
      }
    }
  }
  .paginate{
    height:80px; padding-right:10px; background:#FFF;
  }
  /deep/ .pagination {
    margin-top: 20px;
    li {
      margin-right: 0;
      > a {
        padding: 0 3px;
      }
    }
  }
</style>
